import React from 'react';

class MButton extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			defaultButton: ["M-btn"],
			Type: {
				primary: "M-btn-primary",
				ghost: "M-btn-ghost",
				dashed: "M-btn-dashed"
			},
			Size: {
				small: "M-btn-sm",
				large: "M-btn-lg"
			}
		}
		this._handleClass = this._handleClass.bind(this);
		this._initButton();
	};
	_initButton() {
		this.props.type ? this.state.Type[this.props.type] ? this.state.defaultButton.push(this.state.Type[this.props.type]) : "" : "";
		this.props.size ? this.state.Size[this.props.size] ? this.state.defaultButton.push(this.state.Size[this.props.size]) : "" : "";
	};
	_handleClass(e) {
		// console.log("event",e);
		let self = this;
		self.props.onClick?self.props.onClick():"";
		let cacheStyle = self.state.defaultButton;
		cacheStyle.push("M-btn-clicked");
		self.setState({
			defaultButton: cacheStyle
		});
		/* 因为这里setState了,所以会render两次,这给提供回调函数的接口造成了麻烦，会调用两次回调函数,这是个大问题,得解决掉 */
		setTimeout(function() {
			cacheStyle.pop();
			self.setState({
				defaultButton: cacheStyle
			});
		}, 200);
	};
	shouldComponentUpdate(props,state){
    	console.log("newprops",props);
    	console.log("newstate",state);
    	return true;
    };
	render() {
		return ( 
			<button className = {this.state.defaultButton.join(" ")} onClick = { this._handleClass}>
				<span>
					{this.props.children}
				</span>
			</button>
		);
	}
}
class Group extends React.Component{
	constructor(props) {
		super(props);
	}
	render(){
		return (
			<div className="M-btn-group">
				{this.props.children}
			</div>
		)
	}
}
MButton.Group = Group;
module.exports = MButton;
